import { ref, markRaw } from 'vue';
import { nanoid } from 'nanoid';
/* 图片资源 */
import contactActive from '@/assets/images/contacts.png';
import contact from '@/assets/images/contact.png';
import wechat from '@/assets/images/wechat.png';
import wechatActive from '@/assets/images/wechat-active.png';
import discoverPng from '@/assets/images/discover.png';
import discoverActive from '@/assets/images/discover-active.png';
import meActive from '@/assets/images/me-active.png';
import mePng from '@/assets/images/me.png';
/* end */
import Home from '../home/Home.vue';
import Contacts from '../contacts/Contacts.vue';
import DiscoverVue from '../discover/Discover.vue';
import MeVue from '../me/Me.vue';
import { ITabs } from './types';

export const tabs = ref<ITabs[]>([
  {
    title: '微信',
    component: markRaw(Home),
    newMsg: false,
    id: nanoid(),
    tips: false,
    /* 图标 */
    icon: wechat,
    activeIcon: wechatActive,
    currentIcon: wechatActive,
  },
  {
    title: '通讯录',
    component: markRaw(Contacts),
    icon: contact,
    newMsg: false,
    id: nanoid(),
    tips: false,
    activeIcon: contactActive,
    currentIcon: contact,
  },
  {
    title: '发现',
    component: markRaw(DiscoverVue),
    icon: discoverPng,
    newMsg: false,
    id: nanoid(),
    tips: true,
    activeIcon: discoverActive,
    currentIcon: discoverPng,
  },
  {
    title: '我',
    component: markRaw(MeVue),
    icon: mePng,
    newMsg: false,
    id: nanoid(),
    tips: false,
    activeIcon: meActive,
    currentIcon: mePng,
  },
]);
export const currentTab = ref({
  ...tabs.value[0],
});
